<template>
  <div class="comment">
    <el-card>
      <template v-slot:header>
        <my-breadcrumb>评论管理</my-breadcrumb>
      </template>
      <template>
        <el-table style="width: 100%" :data="list">
          <el-table-column prop="title" label="文章标题"></el-table-column>
          <el-table-column prop="total_comment_count" label="总评论数"></el-table-column>
          <el-table-column prop="fans_comment_count" label="粉丝评论数"> </el-table-column>
          <el-table-column label="评论状态">
              <template v-slot:default="obj">
                  {{obj.row.comment_status ? '关闭' : '正常'}}
              </template>
          </el-table-column>
          <el-table-column label="操作">
              <template v-slot:default='obj'>
                  <el-button @click="toggleComment(obj.row)" v-if='obj.row.comment_status' type="success">打开评论</el-button>
                  <el-button @click="toggleComment(obj.row)" v-else type="danger">关闭评论</el-button>
              </template>
          </el-table-column>
        </el-table>
        <el-pagination
        background
        layout="prev, pager, next"
        :total="total_count"
        :page-size="per_page"
        :current-page="page"
        @current-change="handleCurrentChange">
      </el-pagination>
      </template>
    </el-card>
  </div>
</template>

<script>
import { reqGetComment, reqModCommentStatus } from '@/api/comment.js'
export default {
  name: 'Comment',
  data () {
    return {
      page: 1,
      per_page: 20,
      list: [],
      total_count: 0
    }
  },
  created () {
    this.getComment()
  },
  methods: {
    async getComment () {
      try {
        const res = await reqGetComment(this.page, this.per_page)
        // console.log(res.data)
        this.list = res.data.data.results
        this.total_count = res.data.data.total_count
      } catch (err) {
        console.log(err)
      }
    },
    handleCurrentChange (index) {
      // console.log(index)
      this.page = index
      this.getComment()
    },
    async toggleComment (row) {
      try {
        await reqModCommentStatus(row.id.toString(), !row.comment_status)
        // console.log(res.data)
        this.$message.success('操作成功')
        this.getComment()
      } catch (err) {
        this.$message.error('操作失败')
        console.log(err)
      }
    }

  }
}
</script>

<style>
</style>
